<template>
  <el-card class="m-t-20">
    <template #header>
      <h3>发布者信息</h3>
    </template>
    <div class="user-introduce">
      <div class="user-avatar">
        <span class="color-gray">头像：</span>
        <img v-if="user?.avatar" :src="user?.avatar" alt="头像" />
        <img v-else src="@/assets/images/default-avatar.png" alt="头像" />
      </div>
      <div class="username">
        <span class="color-gray">昵称：</span>
        <span>{{ user?.nickName ? user?.nickName : '-' }}</span>
      </div>
      <div class="role">
        <span class="color-gray">用户类型：</span>
        <!-- <span>{{ user?.roles[0]?.roleName ? user?.roles[0]?.roleName : '' }} </span> -->
        <span v-for="(role, index) in user?.roles" :key="index">
          {{ role.roleName }}{{ index === user.roles.length - 1 ? '' : '、' }}
        </span>
      </div>
      <div class="sex">
        <span class="color-gray">性别：</span>
        <span>
          {{ user?.sex === '0' ? '男' : user?.sex === '1' ? '女' : '-' }}
        </span>
      </div>
      <div class="phone">
        <span class="color-gray">手机号：</span>
        <span>{{ user?.phonenumber ? user?.phonenumber : '-' }}</span>
      </div>
      <div class="email">
        <span class="color-gray">邮箱：</span>
        <span>{{ user?.email ? user?.email : '-' }}</span>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
defineProps(['user']);
</script>

<style lang="scss" scoped>
.user-introduce {
  display: flex;
  flex-wrap: wrap;
  div {
    display: flex;
    align-items: center;
    width: 33%;
    margin-bottom: 10px;
    padding: 0 10px;
    img {
      width: 50px;
      height: 50px;
      object-fit: cover;
      border-radius: 10px;
    }
  }
}
</style>
